{% extends "managersys/base/base_page.html" %}
{% load staticfiles %}
{% block content %}
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="content">
                            <h4 class="title">图书</h4>
                            <div class="toolbar">
                                <!--        Here you can write extra buttons/actions for the toolbar              -->
                            </div>
                            <div class="material-datatables">
                                <table id="datatables" class="table table-striped table-no-bordered table-hover"
                                       style="width:100%;cellspacing:0">
                                    <thead>
                                    <tr>
                                        <th>书名</th>
                                        <th>作者</th>
                                        <th>ISBN</th>
                                        <th>可借阅</th>
                                        <th>预定</th>
                                        {#                                            <th>上传日期</th>#}
                                        <th class="disabled-sorting text-right">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for book in books %}
                                        <tr>
                                            <td>{{ book.name }}</td>
                                            <td>{{ book.author }}</td>
                                            <td>{{ book.ISBN }}</td>
                                            <td>{{ book.is_order }}</td>
                                            <td>{{ book.is_reservation }}</td>
                                            <td class="text-right">
                                                <a href="{% url "managersys:editbook" id=book.id %}" class="btn btn-simple btn-warning btn-icon"><i
                                                        class="ti-pencil-alt"></i></a>
                                                <a href="{% url "managersys:delete_book" id=book.id %}" class="btn btn-simple btn-danger btn-icon"><i
                                                        class="ti-close"></i></a>
                                            </td>
                                        </tr>
                                    {% endfor %}


                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <th>书名</th>
                                        <th>作者</th>
                                        <th>ISBN</th>
                                        <th>可借阅</th>
                                        <th>预定</th>
                                        <th class="text-right">操作</th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                        <!-- end content-->
                    </div>
                    <!--  end card  -->
                </div>
                <!-- end col-md-12 -->
            </div>
        </div>
    </div>
{% endblock %}
{% block pagescript %}
    <script type="text/javascript">
    $(document).ready(function() {
        $('#datatables').DataTable({
            "pagingType": "full_numbers",
            "lengthMenu": [
                [10, 25, 50, -1],
                [10, 25, 50, "All"]
            ],
            responsive: true,
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search records",
            }

        });


        var table = $('#datatables').DataTable();

        // Edit record
        table.on('click', '.edit', function() {
            $tr = $(this).closest('tr');

            var data = table.row($tr).data();
            alert('You press on Row: ' + data[0] + ' ' + data[1] + ' ' + data[2] + '\'s row.');
        });

        // Delete a record
        table.on('click', '.remove', function(e) {
            $tr = $(this).closest('tr');
            table.row($tr).remove().draw();
            e.preventDefault();
        });

        //Like record
        table.on('click', '.like', function() {
            alert('You clicked on Like button');
        });

        $('.card .material-datatables label').addClass('form-group');
    });
</script>
{% endblock %}

